<template>
  <div class="paydetail p-2">
    <el-card>
      <div class="mb-[10px]">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-suffix=":">
          <el-form-item label="创建时间" style="width: 408px">
            <el-date-picker
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="批次号" prop="no">
            <el-input v-model="queryParams.no" placeholder="请输入批次号" clearable style="width: 180px" />
          </el-form-item>
          <el-form-item label="企业名称" prop="mer_name" v-if="!contentType">
            <el-input v-model="queryParams.params.mer_name" placeholder="请输入企业名称" clearable style="width: 180px" />
          </el-form-item>
          <el-form-item label="服务商名称" label-width="92" prop="syd_name" v-if="!contentType">
            <el-input v-model="queryParams.params.syd_name" placeholder="请输入服务商名称" clearable style="width: 180px" />
          </el-form-item>

          <el-form-item label="支付通道" prop="passage" v-if="!contentType">
            <el-select v-model="queryParams.passage" placeholder="请选择支付通道" clearable style="width: 180px">
              <el-option v-for="dict in pay_channel" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="批次状态" prop="payStatus" label-width="80" v-if="!contentType">
            <el-select v-model="queryParams.payStatus" placeholder="请选择批次状态" clearable style="width: 180px">
              <el-option v-for="dict in bill_status" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="批次开票状态" prop="isInvoice" label-width="120" v-if="!contentType">
            <el-select v-model="queryParams.isInvoice" placeholder="请选择批次开票状态" clearable style="width: 180px">
              <el-option v-for="dict in invoice_status" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>

            <a class="btn-nav"  @click="contentType = !contentType">
              <span
                v-if="contentType"
                >高级模式
                <i data-v-771b1fc0="" aria-label="图标: down" class="anticon anticon-down"
                  ><svg
                    viewBox="64 64 896 896"
                    data-icon="down"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                  >
                    <path
                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                    ></path></svg></i
              ></span>
              <span
                v-if="!contentType"
                >精简模式
                <i data-v-771b1fc0="" aria-label="图标: up" class="anticon anticon-up"
                  ><svg
                    viewBox="64 64 896 896"
                    data-icon="up"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                  >
                    <path
                      d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
                    ></path></svg></i
              ></span>
            </a>
          </el-form-item>
        </el-form>
      </div>

      <div>
        <div style="margin-bottom: 10px;">
          <el-space>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button type="primary" icon="Refresh" @click="resetQuery">重置</el-button>
            <el-badge :value="badgeNum" :hidden="badgeHidden" class="item">
                <el-button  icon="Check" @click="selDcheck">待审核</el-button>
            </el-badge>
            <el-button @click="handleExport"><el-icon class="el-icon--left"><Download /></el-icon>批次打款EXCEL导出</el-button>
            <!--
            <el-button @click="handleExport"><el-icon class="el-icon--left"><Download /></el-icon>B2B回单下载</el-button>-->

            <!-- <el-dropdown>
              <span class="el-dropdown-link">
                下载暂存区
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-card>
                  <template #header>
                    <div style="display: flex;justify-content: space-between;">
                      <span> 文件生成后将在系统中保留3天，过期将自动删除 </span>
                      <el-link>刷新</el-link>
                    </div>
                  </template>
                  <el-table></el-table>
                </el-card>
              </template>
            </el-dropdown> -->
          </el-space>
        </div>
        <el-table ref="roleTableRef" v-loading="loading" border :data="operList">
          <el-table-column label="创建时间" align="center" sortable prop="addTime" width="180" />
          <el-table-column label="批次号" align="center" width="210"  prop="no" />
          <el-table-column label="项目编号" align="center" width="210"  prop="taskNo" />
          <el-table-column label="企业名称" align="center" width="210"  prop="merName" >
          </el-table-column>
          <el-table-column label="服务商名称" align="center" width="200" prop="sydName"  >
          </el-table-column>
          <el-table-column label="产品类型" align="center" prop="invoiceType" show-overflow-tooltip width="120" >
            <template #default="scope">
                <dict-tag :options="invoice_type" :value="scope.row.invoiceType" />
              </template>
          </el-table-column>
          <el-table-column label="产品编号" align="center" prop="proNo" show-overflow-tooltip width="120" />
          <el-table-column label="支付通道" align="center" prop="passage" width="120">
          </el-table-column>
          <el-table-column label="业务类型" prop="busType" align="center" width="130">
            <template #default="scope">
              <dict-tag :options="wxfe_bus_type" :value="scope.row.busType" />
            </template>
          </el-table-column>
          <el-table-column label="计费模式" prop="chargeMode" align="center" width="130">
            <template #default="scope">
              <dict-tag :options="charge_mode" :value="scope.row.chargeMode" />
            </template>
          </el-table-column>
          <el-table-column label="到账方式" prop="settlementStyle" align="center" width="130">
            <template #default="scope">
              <dict-tag :options="settlement_style" :value="scope.row.settlementStyle" />
            </template>
          </el-table-column>
          <el-table-column label="服务费承担方" prop="serviceChargeType" align="center" width="130">
            <template #default="scope">
              <dict-tag :options="service_charge_type" :value="scope.row.serviceChargeType" />
            </template>
          </el-table-column>
          <el-table-column label="总金额（元）" prop="amountEnt" align="center" width="130">
            <template #default="scope">
               <span>{{ proxy?.convertFenToYuan(scope.row.amountEnt) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="服务费（元）" prop="serviceChargeAmount" align="center" width="130">
            <template #default="scope">
               <span>{{ proxy?.convertFenToYuan(scope.row.serviceChargeAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实际打款金额（元）" prop="bankCard" align="center" width="130">
                <template #default="scope">
                   <span>{{ proxy?.convertFenToYuan(scope.row.amountEnt - scope.row.serviceChargeAmount ) }}</span>
                </template>
          </el-table-column>
          <el-table-column label="批次状态" prop="status" align="center" width="130">
               <template #default="scope">
                 <dict-tag :options="bill_status" :value="scope.row.status" />
               </template>
          </el-table-column>
          <el-table-column label="开票状态" prop="isInvoice" align="center" width="130">
              <template #default="scope">
                <dict-tag :options="invoice_status" :value="scope.row.isInvoice" />
              </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" align="center" width="130">
          </el-table-column>
          <el-table-column label="失败原因" prop="bankCard" align="center" width="130">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" prop="roleName" width="130">
            <template #default="scope">
              <el-tag type="primary"   @click="clickDetail(scope.row)" style="cursor: pointer;">详情</el-tag>
              <el-tag type="success" @click="check(scope.row)" style="margin-left: 10px;cursor: pointer;"  v-if="scope.row.sydVerifyStatus == 1">审核</el-tag>
            </template>
          </el-table-column>
        </el-table>


        <pagination
         v-if="total > 0"
         v-model:total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
        />
        <!--
        <div class="demo-pagination-block mt-[10px]">
          <el-pagination
           v-if="total > 0"
           v-model:total="total"
           v-model:page="queryParams.pageNum"
           v-model:limit="queryParams.pageSize"
           @pagination="getList"
          />
        </div>-->
      </div>
    </el-card>
    <Details  :openCheck="detailOpen" :txItem="txItem" @dialogClose="dialogClose" />
    <Check  ref="checkRef" :openCheck="checkOpen" :txItem="checkItem" @dialogClose="checkClose"  @dialogSubmit="addOrderApproval1"/>
  </div>

</template>

<script setup name="billSerCheck" lang="ts">
  import useUserStore from '@/store/modules/user';
  import {orderApprovalList,orderApprovalCount,addOrderApproval} from "@/api/settle/billSerCheck";
  import Check from "@/views/settle/billSerCheck/check/check.vue";
  import Details from "@/views/settle/paybatch/detail/detail.vue";

  const { proxy } = getCurrentInstance() as ComponentInternalInstance;

  const { invoice_status } = toRefs<any>(proxy?.useDict('invoice_status'));
  const { bill_status } = toRefs<any>(proxy?.useDict('bill_status'));
  const { pay_channel } = toRefs<any>(proxy?.useDict('pay_channel'));
  const { invoice_type } = toRefs<any>(proxy?.useDict('invoice_type'));
  const { wxfe_bus_type} = toRefs<any>(proxy?.useDict('wxfe_bus_type'));
  const {charge_mode} = toRefs<any>(proxy?.useDict('charge_mode'));
  const {settlement_style} = toRefs<any>(proxy?.useDict('settlement_style'));
  const {service_charge_type} = toRefs<any>(proxy?.useDict('service_charge_type'));

  const router = useRouter();
  const userRole = ref(0);
  const detailOpen = ref(false);
  const checkOpen = ref(false);
  const queryFormRef = ref();
  const txItem = ref({});
  const badgeHidden = ref(true);
  const badgeNum = ref(0)
  const checkRef = ref();


 const data = reactive({
  queryParams: {
    no:'',
    busNo: '',
    params:{
      syd_name:'',
      sydVerifyStatus:null,
      mer_name:'',
      begin_time:'',
      end_time:''
    },
    sydVerifyStatus:null,
    passage:'',
    busType:'',
    payStatus:null,
    isInvoice:null,
    pageSize:10,
    pageNum:1,
    orderByColumn:'',
    isAsc:'',
    roleName: ''
  }
});
const { queryParams } = toRefs(data);
const contentType = ref(true) // true 精简模式 , false 高级模式
const loading = ref(false)   //加载动画
const dateRange = ref(['', '']);  //创建时间参数
const invoiceDatalist = ref([])   //获取到的数据列表
const total = ref(0);
const operList = ref([]);
const checkItem = ref({});


const clickDetail = (item:any)=>{
    detailOpen.value  = true;
    txItem.value = item;
}

const dialogClose = ()=>{
    detailOpen.value  = false;

}

const checkClose =()=>{
  checkOpen.value = false;
}


const selDcheck =()=>{
  queryParams.value.sydVerifyStatus = 1;
  queryParams.value.params.sydVerifyStatus = 1;
   queryParams.value.pageNum = 1;
   getList();
}


const check = (item)=>{
  checkItem.value = item;
  checkOpen.value = true;
}

const getBradNumber = ()=>{
  orderApprovalCount().then(res => {
    badgeNum.value = res.data;
    if(badgeNum.value > 0){
      badgeHidden.value = false;
    }else{
      badgeHidden.value = true;
    }
  })
}


const addOrderApproval1 = (params)=>{
  addOrderApproval(params).then(res => {
      if(res.code == 200){
        checkOpen.value = false;
        checkRef.value.setCheckValue();
        proxy?.$modal.msgSuccess("操作成功");
        getList();
      }
  })

}


/**  查询 */
  const handleQuery = ()=>{
    queryParams.value.pageNum = 1;
    queryParams.value.sydVerifyStatus = null;
    queryParams.value.params.sydVerifyStatus = null;
    if(dateRange.value && dateRange.value.length){
      queryParams.value.params.begin_time = dateRange.value[0]
      queryParams.value.params.end_time = dateRange.value[1]
    }else{
      queryParams.value.params.begin_time = ''
      queryParams.value.params.end_time = ''
    }


    getList();
  }

  const initDate = ()=>{

    // 获取当前日期
    let currentDate = new Date();
    // 创建一个新的Date对象，设置为当前月份的第一天
    let firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
    dateRange.value = [firstDayOfMonth.Format('yyyy-MM-dd'),currentDate.Format('yyyy-MM-dd')]
    queryParams.value.params.begin_time  = firstDayOfMonth.Format('yyyy-MM-dd');
    queryParams.value.params.end_time  = currentDate.Format('yyyy-MM-dd');
  }



  /** 重置按钮操作 */
  const resetQuery = () => {
    dateRange.value = ['', '']
    queryFormRef.value?.resetFields();
    initDate()
    queryParams.value.pageNum = 1;
  }


 /**
  * 查询列表
  */
 const getList = () => {
   loading.value = true
   orderApprovalList(queryParams.value).then(res => {
     operList.value = res.rows
     total.value = res.total
     loading.value = false
   })
   getBradNumber();
 }

 /** 导出按钮操作 */
 const handleExport = () => {

  proxy?.download("/payment/bill/exportOrderApproval", {
       ...queryParams.value,
     }, `批次打款_${new Date().getTime()}.xlsx`);

 };



onMounted(() => {
     let curRoleId = useUserStore().curRoleId;
     userRole.value = curRoleId;
      getList();
    });


</script>

<style lang="scss" scoped>
  .paydetail{
    background-color: #eef0f3;

    .btn-nav {
    margin-left: 8px;
    & {
      color: #1890ff;
      text-decoration: none;
      background-color: transparent;
      outline: none;
      cursor: pointer;
      transition: color 0.3s;
    }
    .anticon {
      display: inline-block;
      color: inherit;
      font-style: normal;
      line-height: 0;
      text-align: center;
      text-transform: none;
      vertical-align: -0.125em;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
  }
  }
</style>
